import { useState, useEffect } from 'react';
import { Column } from '@ant-design/plots';
import { queryObjectProcess } from '@/services/panel'


const ColumnChart = (props) => {
  const [data, setData] = useState(null)
  const { year, quarter, type } = props
  useEffect(()=>{
    // getData()
    setData([
      {
        type: '0-30%',
        value: 12,
      },
      {
        type: '30-60%',
        value: 25,
      },
      {
        type: '60-90%',
        value: 37,
      },
      {
        type: '90-100%',
        value: 21,
      }
    ])
  },[year, quarter, type])
  const getData = async () => {
    const res = await queryObjectProcess({year, quarter, type})
    if(res.code = 200){
      if(res.data.length > 0){
        let newList = res.data.map((item)=>{
          return Object.assign({},item,{type: item.type+'%'})
        })
        setData(newList);
      }
    }
  }
  const paletteSemanticRed = '#F4664A';
  const brandColor = '#5B8FF9';
  const config = {
    height: 200,
    data,
    xField: 'type',
    yField: 'value',
    seriesField: '',
    color: ({ type }) => {
      if (type === '0-30%') {
        return paletteSemanticRed;
      }

      return brandColor;
    },
    label: {
      content: (originData) => {
        const val = parseFloat(originData.value); 
        if (val > 0) {
          return val;
        }
      },
      offset: 10,
    },
    legend: false,
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
  };
  return <>{data && data.length > 0 && <Column {...config} />}</>;
};

export default ColumnChart;
